<template xmlns:border-radius="http://www.w3.org/1999/xhtml">
  <div>

    <el-carousel :interval="5000" arrow="always" height="500px" style="margin-right: 50px;margin-left: 50px">
      <el-carousel-item   style="margin-left: 87px;border-radius: 8px;width:1200px" v-for="item in imagebox" :key="item.id">
        <a href="/allGames">
          <img
              title="查看更多"
              style="width: 1200px; height: 500px;margin: fill"
              :src="item.idView" class="image">
        </a>
      </el-carousel-item>
    </el-carousel>



    <br>
  <h2 style="text-align: center;margin-top: -5px" >热门分类</h2>

    <el-row :gutter="20" style="margin-left: 127px;margin-right: 110px">
      <el-col :span="6">
        <el-card body-style="{ padding: '0px' }" style="border-radius: 8px;height:250px; width: 270px">
          <div style="margin: auto">
            <el-carousel height="150px">
              <el-carousel-item  style="border-radius: 8px" v-for="item in imagebox6" :key="item.id">
                <img
                    preview
                    style="width: 250px; height: 150px;margin: fill"
                    :src="item.idView" class="image">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div style="padding: 14px;">
            <span>动作射击</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button" @click="seemore5">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card body-style="{ padding: '0px' }" style="border-radius: 8px;height:250px; width: 270px">
          <div style="margin: auto">
            <el-carousel height="150px">
              <el-carousel-item  style="border-radius: 8px" v-for="item in imagebox2" :key="item.id">
                <img
                    preview
                    style="width: 250px; height: 150px;margin: fill"
                    :src="item.idView" class="image">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div style="padding: 14px;">
            <span>角色扮演</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button" @click="seemore1">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height:250px; width: 270px;border-radius: 8px" >
          <div style="margin: auto"><el-carousel height="150px">
            <el-carousel-item  style="border-radius: 8px" v-for="item in imagebox3" :key="item.id">
              <img
                  preview
                  style="width: 250px; height: 150px;margin: fill"
                  :src="item.idView" class="image">
            </el-carousel-item>
          </el-carousel></div>
          <div style="padding: 14px;">
            <span>休闲益智</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button" style="align-content: center" @click="seemore2">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="border-radius:8px;height:250px; width: 270px">
          <div style="margin: auto"> <el-carousel height="150px">
            <el-carousel-item  style="border-radius: 8px" v-for="item in imagebox4" :key="item.id">
              <img
                  preview
                  style="width: 250px; height: 150px;margin: fill"
                  :src="item.idView" class="image">
            </el-carousel-item>
          </el-carousel></div>
          <div style="padding: 14px;">
            <span>经营策略</span>
            <div class="bottom clearfix">


              <el-button type="text" class="button"@click="seemore3">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <h2 style="text-align: center"></h2>
    <el-row :gutter="20" style="margin-left: 127px;margin-right: 100px">
      <el-col :span="6">
        <el-card style="border-radius:8px;height:250px; width: 270px">
          <div style="margin: auto"> <el-carousel height="150px">
            <el-carousel-item style="border-radius:8px;" v-for="item in imagebox5" :key="item.id">
              <img
                  preview
                  style="width: 250px; height: 150px;margin: fill"
                  :src="item.idView" class="image">
            </el-carousel-item>
          </el-carousel></div>
          <div style="padding: 14px;">
            <span>体育竞技</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button" @click="seemore4">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="border-radius:8px;height:250px; width: 270px">
          <div style="margin: auto"><el-carousel height="150px">
            <el-carousel-item style="border-radius:8px;" v-for="item in imagebox7" :key="item.id">
              <img
                  preview
                  style="width: 250px; height: 150px;margin: fill"
                  :src="item.idView" class="image">
            </el-carousel-item>
          </el-carousel></div>
          <div style="padding: 14px;">
            <span>桌游棋牌</span>
            <div class="bottom clearfix">

              <el-button type="text" class="button" style="align-content: center" @click="seemore6">查看更多>></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>
      <router-view></router-view>
    </div>
<!--抽屉-->
    <el-drawer
        style=" background: rgba(7, 18, 26, 0.8);"
        :visible.sync="table"
        direction="rtl"
        size="80%">

      <div style="text-align: center"><strong style="font-size: 20px;text-align: center" >{{this.search}}</strong></div>
      <br>
      <div style="margin-left: 10px">
        <el-table
            :data="tableData.filter(data => !search || data.gameType.toLowerCase().includes(search.toLowerCase())).filter(data => !search1 || data.gameName.toLowerCase().includes(search1.toLowerCase()))"
            style="width: 100%"
            ref="multipleTable"
            tooltip-effect="dark"
            stripe
            @selection-change="handleSelectionChange">

          <el-table-column
              label=""
              style="border-radius: 8px"
          >
            <template slot-scope="scope" style="border-radius: 8px">
            <el-image
                preview
                :src="'http://localhost:8080/GameStore/images/'+scope.row.gameImg"
                style="width: 80px;height: 80px;border-radius: 8px"
            ></el-image>
            </template>
          </el-table-column>
          <el-table-column
              label="游戏名称"
              prop="gameName"
              width="180"
          >
          </el-table-column>
          <el-table-column
              label="游戏类型"
              prop="gameType">
          </el-table-column>

          <el-table-column
              label="价格"
              sortable
              width="180"
              prop="price">
            <template slot-scope="scope">
              ¥{{scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column
              label="销量"
              sortable
              width="180"
              prop="saleCount">
          </el-table-column>

          <el-table-column type="expand" style="width:20px">
            <template slot-scope="props">

              <el-row :gutter="20">
                <el-col :span="8">
                  <div>
                    <el-statistic group-separator="," :precision="2"  title="评分">

                    </el-statistic>
                    <el-rate
                        style="text-align: center"
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                    </el-rate>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <el-statistic  title="销量">
                      <template slot="formatter">
                        {{props.row.saleCount}}
                      </template>

                    </el-statistic>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <el-statistic  title="年满16周岁">
                      <template slot="formatter">
                        16+
                      </template>

                    </el-statistic>
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>


              <el-row :gutter="20">
                <el-col :span="15">
                  <div>
                    <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
                    <br>
                    <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                      <el-carousel height="300px" width="300px" >
                        <el-carousel-item v-for="item in props.row.detailGameImg" :key="item">
                          <el-image
                              preview
                              :src="'http://localhost:8080/GameStore/images/'+item"
                              style="width: 500px;height: 300px;border-radius: 8px"
                          ></el-image>
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
                    <br>
                    <div style="text-align:left;margin-right: 50px">{{props.row.description}}</div>
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </template>
          </el-table-column>
          <el-table-column
              label=""
              style="width: 2px">
            详情
          </el-table-column>
          <el-table-column
              align="right"
              width="210">
            <template slot="header" slot-scope="scope">
              <el-input
                  v-model="search1"
                  placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">加入购物车</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">立即购买</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页-->
      </div>


    </el-drawer>
  </div>
</template>

<script>
export default {
  name:"home",
  data() {
    return {
      value:3.7,
        tableData: [
    ],
        search: '',
      search1:'',
      table:false,
      basePath:'@/assets/images/1.jpg',
      activeIndex: '1',
      activeIndex2: '1',
      imagebox:[
          {id:0,idView:require('@/assets/img_6.png')},
          {id:1,idView:require('@/assets/img_7.png')},
          {id:2,idView:require('@/assets/img_8.png')},
          {id:3,idView:require('@/assets/img_10.png')},
          {id:4,idView:require('@/assets/img_11.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox2:[
          {id:0,idView:require('@/assets/img_9.png')},
          {id:1,idView:require('@/assets/img_12.png')},
          {id:2,idView:require('@/assets/img_13.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox3:[
          {id:0,idView:require('@/assets/img_14.png')},
          {id:1,idView:require('@/assets/img_15.png')},
          {id:2,idView:require('@/assets/img_16.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox4:[
          {id:0,idView:require('@/assets/img_17.png')},
          {id:1,idView:require('@/assets/img_18.png')},
          {id:2,idView:require('@/assets/img_19.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox5:[
          {id:0,idView:require('@/assets/img_20.png')},
          {id:1,idView:require('@/assets/img_21.png')},
          {id:2,idView:require('@/assets/img_22.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox6:[
          {id:0,idView:require('@/assets/img_23.png')},
          {id:1,idView:require('@/assets/img_24.png')},
          {id:2,idView:require('@/assets/img_25.png')},
        //imagebox是assets下一个放图片的文件夹
      ],imagebox7:[
          {id:0,idView:require('@/assets/img_26.png')},
          {id:1,idView:require('@/assets/img_27.png')},
          {id:2,idView:require('@/assets/img_28.png')},
        //imagebox是assets下一个放图片的文件夹
      ],
    }
  },
created(){
    this.getGameList();
},
  methods: {
    filterTag(value, row) {
      return row.gameType === value;
    },
    getGameList() {
      this.$axios.get('/allGames',{
        params:{
          size:1000000,
          current:1
        }
      }).then(res => {
        this.tableData = res.data.gameList
      })
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$message({
        showClose: true,
        message: '请先登录',
        type:'error',
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$message({
        showClose: true,
        message: '请先登录',
        type:'error',
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.getGameList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.getGameList();
    },

seemore1(){
      this.search='角色扮演'
  this.table=true
},seemore2(){
      this.search='休闲益智'
      this.table=true
},seemore3(){
      this.search='经营策略'
      this.table=true
},seemore4(){
      this.search='体育竞技'
      this.table=true
},seemore5(){
      this.search='动作射击'
      this.table=true
},seemore6(){
      this.search='棋牌桌游'
      this.table=true
},
    handleSelect(key, keyPath) {
      console.log(key);
      if(key == '1'){
        this.$router.push({path: '/'});
      }
      if(key == '3'){
        this.$router.push({path: '/login'});
      }
      if(key == '4'){
        this.$router.push({path: '/register'});
      }


    },

  }
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>